<template>
  <div>
    <!-- 顶部 -->
    <header>
      <img src="@/assets/logo.png" alt="红梅食品 Logo" style="max-height: 35px;">
      <button class="menu-toggle" @click="toggleMenu">☰</button>
      <nav :class="{'active': isMenuActive}" id="mobile-nav">
        <a href="indexPage.vue">首页</a>
        <a href="introduction.vue">红梅简介</a>
        <a href="material.vue">原料介绍</a>
        <a href="makeProduct.vue">制作过程</a>
        <a href="superMarket.vue">开始投放市场</a>
      </nav>
    </header>

    <h1>味精制作</h1>

    <div class="container" id="reactor">
      <p id="output">{{ output }}</p>
    </div>

    <div class="materials">
      <div class="material" @click="addMaterial('玉米')">玉米</div>
      <div class="material" @click="addMaterial('甘蔗')">甘蔗</div>
      <div class="material" @click="addMaterial('其他')">其他</div>
    </div>

    <button @click="startProduction">开始制作</button>

    <footer>
      <p>红梅食品 创造生活高品质</p>
      <p>HONGMEI FOOD CREATES HIGH QUALITY OF LIFE</p>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      isMenuActive: false,  // 控制菜单显示与隐藏
      materials: [],        // 存储已添加的原材料
      output: '将原材料加入容器中。', // 显示提示信息
    };
  },
  methods: {
    // 切换菜单显示状态
    toggleMenu() {
      this.isMenuActive = !this.isMenuActive;
    },
    // 添加原材料到容器
    addMaterial(material) {
      this.materials.push(material);
      this.output = `已添加: ${this.materials.join(', ')}`;
    },
    // 开始制作味精
    startProduction() {
      if (this.materials.length === 0) {
        this.output = '请先添加原材料！';
        return;
      }

      this.output = '反应容器开始工作，正在制作味精...';
      setTimeout(() => {
        this.output = '味精晶体生成！';
        this.generateCrystals();
      }, 3000); // 3秒制作时间
    },
    // 生成味精晶体动画
    generateCrystals() {
      for (let i = 0; i < 5; i++) {
        const crystal = document.createElement('div');
        crystal.className = 'crystal';
        crystal.style.left = `${Math.random() * 260 + 20}px`;
        crystal.style.top = `${Math.random() * 260 + 20}px`;
        document.getElementById('reactor').appendChild(crystal);

        // 移除晶体动画
        setTimeout(() => {
          crystal.remove();
        }, 5000); // 晶体持续5秒
      }
    }
  }
}
</script>

<style scoped>
/* 全局样式 */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  line-height: 1.6;
}

/* 顶部导航 */
header {
  background-color: #d00000;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  position: relative;
}

header img {
  max-height: 50px;
}

/* 菜单按钮 */
.menu-toggle {
  display: none;
  font-size: 1.5rem;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
}

/* 导航菜单 */
nav {
  display: flex;
  gap: 1rem;
}

nav a {
  color: white;
  text-decoration: none;
  font-size: 1rem;
}

nav a:hover {
  text-decoration: underline;
}

/* 移动端样式 */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  nav {
    display: none;
    flex-direction: column;
    background-color: #d00000;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    padding: 1rem 0;
    z-index: 9999;
  }

  nav a {
    padding: 0.5rem 1rem;
  }

  nav.active {
    display: flex !important;
  }
}

/* 主内容区域 */
.container {
  margin: 20px auto;
  width: 300px;
  height: 300px;
  border: 2px solid #000;
  border-radius: 10px;
  position: relative;
  background: #f3f3f3;
}

.materials {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.material {
  width: 50px;
  height: 50px;
  background: #ffd700;
  border-radius: 50%;
  line-height: 50px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}

#output {
  margin-top: 20px;
  font-size: 18px;
  color: #555;
}

.crystal {
  position: absolute;
  width: 30px;
  height: 30px;
  background: #b0e0e6;
  border-radius: 5px;
  animation: float 3s infinite ease-in-out;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

/* 页脚 */
footer {
  background-color: #d00000;
  color: white;
  text-align: center;
  padding: 1rem 0;
  margin-top: 2rem;
}
</style>
